<template>
  <div ref="vantaRef" class="login-container">
    <h1 class="login-title">会议室预约系统</h1>
    <LoginRegister />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import LoginRegister from '../components/LoginRegister.vue'
import * as THREE from 'three'
import HALO from 'vanta/src/vanta.halo'


const vantaRef = ref(null)
let vantaEffect = null

onMounted(() => {
  vantaEffect = HALO({
    el: vantaRef.value,
    THREE: THREE,
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 200.00,
    minWidth: 200.00,
    size: 1,
    yOffset: 0.01
  })
})

onUnmounted(() => {
  if (vantaEffect) vantaEffect.destroy()
})
</script>

<style scoped>
.login-container {
  position: fixed;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
}


.login-title {
  position: fixed;
  left: 50%;
  top: calc(1%);
  transform: translateX(-50%);
  color: white;
  font-size: 2.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  opacity: 0.8;
  z-index: 100;
  transition: all 0.3s ease;
}


@keyframes wave {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 1000px;
  }
}
</style>